<template>
    <van-swipe-cell class="follow-product-list-item">
        <van-card :title="store.name" @click.stop="handleRouteToStore" centered>
            <template #thumb>
                <van-image width="3rem"
                           height="3rem" round fit="cover" :src="store.logo"/>
            </template>
        </van-card>
        <template #right>
            <van-button square text="取消关注" type="danger" @click.stop="$emit('unfollowing')"/>
        </template>
    </van-swipe-cell>
</template>

<script>
  import { Button, Card, Image, SwipeCell } from "vant"
  import { follow } from "@mall/api-services"

  export default {
    name: "FollowStoreListItem",
    components: {
      [Button.name]: Button,
      [Card.name]: Card,
      [Image.name]: Image,
      [SwipeCell.name]: SwipeCell,
    },
    props: {
      store: follow.FollowStore,
    },
    methods: {
      handleRouteToStore() {
        const { store } = this
        this.$router.push(`/stores/${store.id}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .follow-product-list-item {
        background: #fff;

        .van-button {
            height: 100%;
        }

        .van-card {
            background: inherit;

            .van-card__thumb {
                width: initial;
                height: initial;
            }

            .van-card__content {
                min-height: initial;
                font-size: 14px;
                font-weight: 700;

                .van-card__title {
                    font-weight: inherit;
                    line-height: 1rem;
                }
            }
        }
    }

</style>
